<template>
    <div>
        <a-form-model :model="form" layout="inline">
            <a-form-model-item label="标题">
                <a-input v-model="form.text" />
            </a-form-model-item>
            <a-form-model-item label="对象">
                <a-input v-model="form.object" />
            </a-form-model-item>
            <a-form-model-item label="类别">
                <a-select v-model="form.type">
                    <a-select-option value="all">全部</a-select-option>
                    <a-select-option value="platform">平台</a-select-option>
                    <a-select-option value="weChat">微信</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="通知日期">
                <a-range-picker v-model="form.date" />
            </a-form-model-item>
            <a-form-model-item label="阅读">
                <a-select v-model="form.read">
                    <a-select-option value="all">全部</a-select-option>
                    <a-select-option value="read">已读</a-select-option>
                    <a-select-option value="unread">未读</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item>
                <a-button>重置</a-button>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" :loading="queryLoading" @click="query">查询</a-button>
            </a-form-model-item>
        </a-form-model>
        <a-button type="link" @click="showAddNotification"><a-icon type="plus" />发布</a-button>
        <a-table :loading="spinning" :columns="columns" :data-source="data" :row-selection="{ selectedRowKeys, onChange }" :pagination="{ 'show-quick-jumper': true, 'show-size-changer': true }">
            <span slot="date" slot-scope="date">{{date.getFullYear()}}-{{date.getMonth()+1}}-{{date.getDate()}}</span>
            <span slot="status" slot-scope="status">
                <span v-if="!status"><a-badge status="processing" />未发布</span>
                <span v-else><a-badge status="success" />已发布</span>
            </span>
            <div slot="action" slot-scope="_, record, index">
                <a-button type="link" v-if="!record.status" @click="deleteNotification">发布</a-button>
                <a-button type="link" @click="showNotification(index)">查看</a-button>
                <a-button type="link" v-if="!record.status" @click="showAddNotification">编辑</a-button>
                <a-button type="link" @click="deleteNotification">删除</a-button>
            </div>
            <span slot="read" slot-scope="read, record">
                {{read}}/<span style="color: gray;">{{record.total}}</span>
            </span>
        </a-table>
        <a-modal v-model="showAdd" title="发布通知" :confirm-loading="addConfirmLoading" @ok="addNotification">
            <a-form-model :model="newNotification">
                <a-form-model-item label="类别">
                    <a-select v-model="newNotification.type">
                        <a-select-option value="all">全部</a-select-option>
                        <a-select-option value="platform">平台</a-select-option>
                        <a-select-option value="weChat">微信</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="标题">
                    <a-input v-model="newNotification.title" />
                </a-form-model-item>
                <a-form-model-item label="对象">
                    <a-checkbox v-model="newNotification.object.all">全部</a-checkbox>
                    <a-button v-if="!newNotification.object.all" type="link" @click="showAddObject">自定义选择</a-button>
                </a-form-model-item>
                <a-form-model-item label="通知内容">
                    <ckeditor :editor="editor" v-model="newNotification.content" />
                </a-form-model-item>
                <a-form-model-item label="通知附图">
                    <a-upload v-model="fileList" list-type="picture-card">
                        <div>
                            <a-icon type="plus" />
                            <div class="ant-upload-text">Upload</div>
                        </div>
                    </a-upload>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <a-modal v-model="showObjects" title="选择通知接收对象" :footer="null" :after-close="showAddNotification">
            <a-table :columns="objectColumns" :data-source="objectData" :row-selection="{ objectSelectedRowKeys, onObjectChange }" :pagination="{ 'show-quick-jumper': true, 'show-size-changer': true }">

            </a-table>
        </a-modal>
        <a-modal v-model="showDetail" title="通知" :footer="null">
            <div>{{detail.text}}</div>
            <div id="notification-management-detail-modal-content"></div>
            <div>类别：{{detail.type}}</div>
            <div>对象：{{detail.object}}</div>
            <div>发布人：{{detail.author}}</div>
            <div>{{detail.date.getFullYear()}}-{{detail.date.getMonth()+1}}-{{detail.date.getDate()}}</div>
            <div v-if="detail.fileList.length > 0">
                <a-divider />
                <div>附件：</div>
                <div><a-upload :disabled="true" :default-file-list="detail.fileList" /></div>
            </div>
        </a-modal>
    </div>
</template>

<script>
    import DecoupledEditor from '@ckeditor/ckeditor5-build-classic';

    export default {
        name: "NotificationManagement",
        data: () => ({
            showDetail: false,
            detail: {
                text: '',
                type: '',
                object: '',
                author: '',
                date: new Date(),
                fileList: [
                    {
                        uid: 1,
                        name: 'favicon.ico',
                        status: 'done',
                        url: '/favicon.ico',
                    },
                    {
                        uid: 2,
                        name: 'index.html',
                        status: 'done',
                        url: '/index.html',
                    },
                ],
            },
            editor: DecoupledEditor,
            form: {
                text: '',
                object: '',
                type: 'all',
                date: null,
                read: 'all',
            },
            columns: [
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    scopedSlots: { customRender: 'status' },
                },
                {
                    title: '类别',
                    dataIndex: 'type',
                    key: 'type',
                },
                {
                    title: '标题',
                    dataIndex: 'text',
                    key: 'text',
                },
                {
                    title: '对象',
                    dataIndex: 'object',
                    key: 'object',
                },
                {
                    title: '阅读',
                    dataIndex: 'read',
                    key: 'read',
                    scopedSlots: { customRender: 'read' },
                },
                {
                    title: '通知日期',
                    dataIndex: 'date',
                    key: 'date',
                    scopedSlots: { customRender: 'date' },
                },
                {
                    title: '操作',
                    key: 'action',
                    scopedSlots: { customRender: 'action' },
                }
            ],
            objectColumns: [
                {
                    title: '部门名称',
                    dataIndex: 'department',
                    key: 'department',
                },
                {
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '电话',
                    dataIndex: 'phone',
                    key: 'phone',
                },
                {
                    title: '职务',
                    dataIndex: 'vocation',
                    key: 'vocation',
                },
            ],
            data: [
                {
                    key: 1,
                    status: 1,
                    type: '平台',
                    text: '有关：春节假期节前检查',
                    object: '1栋',
                    read: 1,
                    total: 8,
                    date: new Date(2020, 8, 9),
                    author: '超级管理员',
                    content: '<h1><strong>5555</strong><em>55555</em><s>4444444<em><strong>33333<span class="marker">555555<span style="color:#f39c12">5555555</span></span></strong></em></s></h1>\n' +
                        '\n' +
                        '<hr />\n' +
                        '<hr />\n' +
                        '<h1><s>Ŷ&raquo;</s></h1>\n' +
                        '\n' +
                        '<hr />\n' +
                        '<table border="1" cellpadding="1" cellspacing="1">\n' +
                        '        <tbody>\n' +
                        '                <tr>\n' +
                        '                        <td>1</td>\n' +
                        '                        <td>2</td>\n' +
                        '                </tr>\n' +
                        '                <tr>\n' +
                        '                        <td>333</td>\n' +
                        '                        <td>4</td>\n' +
                        '                </tr>\n' +
                        '                <tr>\n' +
                        '                        <td>5</td>\n' +
                        '                        <td>6</td>\n' +
                        '                </tr>\n' +
                        '        </tbody>\n' +
                        '</table>\n' +
                        '\n' +
                        '<p>&nbsp;</p>',
                    fileList: [
                        {
                            uid: 1,
                            name: 'favicon.ico',
                            status: 'done',
                            url: '/favicon.ico',
                        },
                        {
                            uid: 2,
                            name: 'index.html',
                            status: 'done',
                            url: '/index.html',
                        },
                    ],
                },
                {
                    key: 2,
                    status: 0,
                    type: '平台',
                    text: '有关：国庆假期节前检查',
                    object: '1栋',
                    read: 1,
                    total: 8,
                    date: new Date(2020, 8, 10),
                    author: '群众',
                    content: 'Simple Content',
                    fileList: [
                        {
                            uid: 1,
                            name: 'favicon.ico',
                            status: 'done',
                            url: '/favicon.ico',
                        },
                    ],
                },
                {
                    key: 3,
                    status: 0,
                    type: '平台',
                    text: '有关：国庆假期节前检查',
                    object: '1栋',
                    read: 1,
                    total: 8,
                    date: new Date(2020, 8, 11),
                    author: '团员',
                    content: 'Simple Content 2',
                    fileList: [],
                },
            ],
            objectData: [
                {
                    key: 1,
                    department: '清洁部',
                    name: '杨明山',
                    phone: '13798044832',
                    vocation: '清洁主管',
                },
                {
                    key: 2,
                    department: '清洁部',
                    name: '蒋从运',
                    phone: '13286828931',
                    vocation: '保洁员',
                },
                {
                    key: 3,
                    department: '仓管部',
                    name: '李美园',
                    phone: '13538791503',
                    vocation: '仓管员',
                },
                {
                    key: 4,
                    department: '保安部',
                    name: '乔荣崇',
                    phone: '13724872453',
                    vocation: '副总经理',
                },
            ],
            selectedRowKeys: [],
            objectSelectedRowKeys: [],
            showAdd: false,
            addConfirmLoading: false,
            queryLoading: false,
            spinning: false,
            showObjects: false,
            newNotification: {
                type: 'all',
                text: '',
                object: {
                    all: false,
                },
                content: '',
                image: '',
            },
            fileList: [],
        }),
        methods: {
            onChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            onObjectChange(selectedRowKeys) {
                this.objectSelectedRowKeys = selectedRowKeys;
            },
            showAddNotification() {
                this.showAdd = true;
            },
            showAddObject() {
                this.showAdd = false;
                this.showObjects = true;
            },
            showNotification(index) {
                this.showDetail = true;
                this.detail.author = this.data[index].author;
                this.detail.date = this.data[index].date;
                this.detail.text = this.data[index].text;
                this.detail.object = this.data[index].object;
                this.detail.type = this.data[index].type;
                this.detail.fileList.length = 0;
                for (const x of this.data[index].fileList) {
                    this.detail.fileList.push(x);
                }
                setTimeout(() => {
                    document.getElementById('notification-management-detail-modal-content').innerHTML = this.data[index].content;
                }, 0);
            },
            addNotification() {
                this.addConfirmLoading = true;
            },
            deleteNotification() {
                this.spinning = true;
            },
            query() {
                this.queryLoading = true;
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.$emit('route');
            });
        }
    }
</script>

<style scoped>
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
</style>
